<template>
    <div class="Home">
        <header>
            <h1>小鸟游资源网站</h1>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item :index="1">视频中心</el-menu-item>
                <el-menu-item :index="2">好音鉴赏</el-menu-item>
            </el-menu>
        </header>
        <main>
            <router-view></router-view>
        </main>
        <footer>

        </footer>
    </div>
</template>
<script>
    import {ref} from 'vue'
    import {ElMenu, ElMenuItem} from 'element-plus'
    export default {
        components:{
            ElMenu,
            ElMenuItem
        },
        setup() {
            const handleSelect = (e) => {
                console.log(e);
            }
            const activeIndex = ref(1)
            return {
                handleSelect,
                activeIndex
            }
        }
    }
</script>

<style scoped lang="less">
    .Home {
        width: 1200px;
        background: rgba(255, 255, 255, .9);
        margin: 20px auto;
        color: #333333;
        padding: 20px;
        border-radius: 4px;

        header {
            h1 {
                font-size: 32px;
                padding: 0px 0 10px 0;
            }

            .el-menu-demo {
                color: #ffffff;
                background: transparent;

                ::v-deep(.el-menu-item) {
                    font-size: 16px;
                }

                ::v-deep(.el-menu-item.is-active) {
                    background: transparent;
                }

                ::v-deep(.el-menu-item:hover) {
                    background: transparent;
                }
            }

            main {

            }
        }
    }
</style>
